<template>
  <el-dialog
    class="detailDialog"
    v-model="props.planDetailDialog"
    :title="props.dialogForm?.title"
    width="45%"
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="title">基本信息</div>
    <el-row class="row">
      <el-col :span="8">
        <div>
          计划类型：{{
            props.dialogForm?.form.planTyp == 1 ? '单次维护' : '周期维护'
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div>计划开始时间：{{ props.dialogForm?.form.planBeginDate }}</div>
      </el-col>
      <el-col :span="8">
        <div>
          点检周期：{{
            props.dialogForm?.form.period + props.dialogForm?.form.periodUnit
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>点检类型：{{ props.dialogForm?.form.checkTypeName }}</div>
      </el-col>
      <el-col :span="8">
        <div>计划结束时间：{{ props.dialogForm?.form.planEndDate }}</div>
      </el-col>
      <el-col :span="8">
        <div>点检人：{{ props.dialogForm?.form.checkUserName }}</div>
      </el-col>
    </el-row>
    <div class="title">点检项目</div>
    <el-row
      class="row"
      v-for="(item, index) in props.dialogForm?.form.deviceItemList"
    >
      <el-col :span="24">
        <div>{{ index + 1 + '、' + item.itemName + '：' + item.content }}</div>
      </el-col>
    </el-row>
    <div class="title">
      点检设备<span
        >（{{ props.dialogForm?.form.deviceInfoList.length }}）</span
      >
    </div>
    <el-row class="row">
      <el-col :span="24">
        <el-table
          :data="props.dialogForm?.form.deviceInfoList"
          border
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="deviceNum" label="设备编号" />
          <el-table-column prop="deviceName" label="设备名称" />
          <el-table-column prop="seatNum" label="位置号"> </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  planDetailDialog: Boolean,
  dialogForm: Object
})

const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}
</script>
<style scoped lang="scss">
.detailDialog {
  .topBox {
    font-size: var(--el-font-size-base);
    border: 1px solid gray;
    padding: 20px 100px;
    margin-bottom: 15px;

    .item {
      display: flex;
      justify-content: space-between;
    }
  }

  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
</style>
